<template>
  <div class="wrap">
    <div style="display:flex">
      <date-select @dateChange="dateChange" />
      <classify-select :options="options" @classfySelect="classfySelect" />
      <el-button v-waves style="margin-left: 10px; height: 100%" type="primary" @click="getHistoryDay">
        搜索
      </el-button>
    </div>
    <div ref="chart" class="chart" />
  </div>
</template>

<script>
import { getGroupPointCategory, getHistoryDay } from '@/api/stationMonitor'
import waves from '@/directive/waves/index.js' // 水波纹指令
import { mapGetters } from 'vuex'
import DateSelect from '@/components/DateSelect'
import ClassifySelect from '@/components/ClassifySelect'
export default {
  components: {
    DateSelect,
    ClassifySelect
  },
  directives: {
    waves
  },
  props: {
    id: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      options: [
        {
          label: '',
          value: 0
        }
      ],
      date: '',
      pointCategoryId: 0,
      chart: null,
      series: [],
      unit: '',
      xAxisData: []
    }
  },
  computed: {
    ...mapGetters([
      'stationId'
    ])
  },
  watch: {
    id() {
      this.getGroupPointCategory()
    }
  },
  methods: {
    getGroupPointCategory() {
      const option = {
        stationId: this.stationId,
        groupId: this.id
      }
      getGroupPointCategory(option).then(res => {
        const { data } = res
        this.options = []
        data.forEach((item, index) => {
          const obj = {
            label: item.point_category_name,
            value: item.point_category_id
          }
          this.options.push(obj)
        })
        this.pointCategoryId = this.options[0].value
        // this.options = data
      })
    },
    getHistoryDay() {
      const options = {
        stationId: this.stationId,
        groupId: this.id,
        date: this.date,
        pointCategoryId: this.pointCategoryId
      }
      getHistoryDay(options).then((res) => {
        const { data } = res
        this.xAxisData = data.time
        this.unit = data.unit
        this.series = []
        data.value.forEach((item, index) => {
          console.log(item)
          this.series.push({
            name: data.name[index],
            type: 'line',
            data: item
          })
        })
        this.renderChart()
        console.log(this.series)
      })
    },
    renderChart() {
      const echarts = require('echarts')
      console.log(this.$refs.chart)
      this.chart = echarts.init(this.$refs.chart)
      const option = {
        title: {
          text: this.unit
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          // data: ['Email', 'Union Ads', 'Video Ads', 'Direct', 'Search Engine']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data: this.xAxisData
        },
        yAxis: {
          type: 'value'
        },
        series: this.series
      }

      option && this.chart.setOption(option)

      window.addEventListener('resize', () => {
        this.chart.resize()
      })
    },
    dateChange(date) {
      this.date = date
      this.getGroupPointCategory()
    },
    classfySelect(val) {
      this.pointCategoryId = val
    // this.isConfirm = val
    // this.getGroupAlarm()
    }
  }
}
</script>

<style lang="scss" scoped>
.wrap {
  padding: 10px;
  .chart {
    border: 1px solid #000;
    min-height: calc(100vh - 280px);

  }
}
</style>
